<template>
  <ModalLayout>
    <div>
      <ModalHeader title="重命名"></ModalHeader>
      <div class="vuefinder__new-file-modal__content">
        <div class="vuefinder__new-file-modal__form mt-12 mb-5">
          <div class="flex items-center">
            <span class="text-red-500">*</span>
            <span
              class="vuefinder__new-file-modal__description whitespace-nowrap text-slate-500"
              >文件名称：</span
            >
            <input
              v-model="name"
              @keyup.enter="createFile"
              class="vuefinder__new-file-modal__input"
              placeholder="请输入"
              type="text"
            />
          </div>
          <message v-if="message.length" @hidden="message = ''" error>{{
            message
          }}</message>
        </div>
      </div>
    </div>

    <template v-slot:buttons>
      <button type="button" @click="save" class="vf-btn vf-btn-primary bg-primary-6">
        保存
      </button>
      <button type="button" @click="app.modal.close()" class="vf-btn vf-btn-secondary">
        {{ t("Cancel") }}
      </button>
    </template>
  </ModalLayout>
</template>

<script setup>
import ModalLayout from "./ModalLayout.vue";
import { inject, ref } from "vue";
import { message } from "ant-design-vue";
import ModalHeader from "./ModalHeader.vue";

const app = inject("ServiceContainer");
const { t } = app.i18n;
const name = ref(app.modal.data.items[0]["basename"]);

const save = () => {
  if (name.value !== "") {
    app.emitter.emit("vf-fetch", {
      params: {
        fetchType: "rename",
        m: "post",
      },
      body: {
        project_id: app.requestParams.project_id,
        enterprise_id: app.requestParams.enterprise_id,
        title: name.value,
        is_file: ~~(app.modal.data.items[0]["type"] === "file"),
        dir_id: app.modal.data.items[0]["id"],
      },
      onSuccess: () => {
        app.emitter.emit('vf-fetch', {params: {dir: app.fs.data.dirname, dir_id: app.fs.data.dir_id}});
        message.success('数据已更新！');
      },
      onError: (e) => {
        message.error(t(e.message));
      },
    });
  } else {
    message.warn("请输入文件名称");
  }
};
</script>
